<template>
  <div class="id-shot-cont">
    <video ref="video" id="video" playsinline webkit-playsinline="true" autoplay="true" muted="true" width="300" height="200"></video>
    <canvas ref="canvas" id="canvas" width="300" height="200"></canvas>
    <img ref="img" id="view-img" />
    <div class="btn-wrap">
      <button id="tack" @click="handleTack">拍照</button>
      <button id="submit" @click="handleCommit">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      getUserMedia: {},
      vendorURL: ''
    }
  },
  mounted () {
    // mediaDevices为undefined --> https://juejin.cn/post/6877436779452956686
    console.log('navigator.mediaDevices', navigator);
    this.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia
    // const _video = document.querySelector("#video");
    // const _canvas = document.querySelector("#canvas");
    // const _tack = document.querySelector("#tack");
    // const _submit = document.querySelector("#submit");
    // const _img = document.querySelector("#view-img");
    this.vendorURL = window.URL || window.webkitURL
    // _tack.addEventListener('click', () => {
    //   navigator.mediaDevices.getUserMedia(
    //     {
    //       video: { facingMode: 'environment'}, // 摄像头user: 前摄像头 environment:后摄像头
    //       audio: false // 音频
    //     }).then((stream) => {
    //     // alert('stream')
    //     // alert(stream)
    //     // _video.src = window.URL.createObjectURL(stream);
    //     // 判断兼容老写法
    //     if ('srcObject' in _video) {
    //       _video.srcObject = stream
    //     } else {
    //       alert('window.URL.createObjectURL')
    //       _video.src = window.URL.createObjectURL(stream)
    //     }
    //     _video.onloadedmetadata = function (e) {
    //       _video.play()
    //     }
    //     _video.play()
    //   }).catch((err) => {
    //     console.log('getUserMedia err :>> ', '拉取失败')
    //   })
    // })
    // _submit.addEventListener('click', function () {
    //   _canvas.getContext('2d').drawImage(_video, 0, 0, 300, 200)
    //   _img.src = _canvas.toDataURL('image/png')
    // })
  },
  methods: {
    // 点击拍照
    handleTack () {
      navigator.mediaDevices.getUserMedia(
        {
          video: { facingMode: 'environment' }, // 摄像头user: 前摄像头 environment:后摄像头
          audio: false // 音频
        }).then((stream) => {
        // alert('stream')
        // alert(stream)
        // _video.src = window.URL.createObjectURL(stream);
        // 判断兼容老写法
        const _video = this.$refs._video
        if ('srcObject' in _video) {
          _video.srcObject = stream
        } else {
          alert('window.URL.createObjectURL')
          _video.src = window.URL.createObjectURL(stream)
        }
        _video.onloadedmetadata = function (e) {
          _video.play()
        }
        _video.play()
      }).catch(err => {
        console.log('getUserMedia err :>> ', `拉取失败${err}`)
      })
    },
    // 点击确定
    handleCommit () {
      const [ _canvas, _img, _video ] = [this.$refs.canvas, this.$refs.img, this.$refs.video]
      _canvas.getContext('2d').drawImage(_video, 0, 0, 300, 200)
      _img.src = _canvas.toDataURL('image/png')
    }
  }
}
</script>

<style lang="less" scoped>
.id-shot-cont {
  .content {
    margin: 10px;
  }
  .content img {
    width: 300px;
    height: 200px;
  }
  .btn-wrap{
      margin: 20px auto;
  }
  button {
    outline: none;
    color: #fff;
    background: #2719e9;
    padding: 8px 10px;
    border: 1px solid #1607e7;
    cursor: pointer;
  }
  video {
    border: 1px solid #1607e7;
  }
  canvas {
    border: 1px solid #07e707;
  }
}
</style>
